<template>
  <div class="variableContainer" :style="{ height: variableContainerHeight }">
    <myHeader title="配置变量"></myHeader>
    <Search></Search>
    <div class="tableContainer" :style="{ height: tableContainerHeight }">
      <el-table
          :data="realData"
          :height="tableHeight"
          style="width: 100%"
          :default-sort="{ prop: 'vid', order: 'descending' }"
          stripe
          border
      >
        <el-table-column prop="vId" label="变量ID" sortable min-width="234">
        </el-table-column>
        <el-table-column prop="vInfo" label="变量说明" sortable min-width="234">
        </el-table-column>
        <el-table-column prop="vName" label="变量名" sortable min-width="234">
        </el-table-column>
        <el-table-column prop="vId" label="变量编号" sortable min-width="234">
        </el-table-column>
        <el-table-column
            prop="vHandle"
            label="配置变量"
            sortable
            min-width="246"
        >
          <template slot-scope="scope">
            <i
                class="el-icon-edit i-color"
                @click="handleVariableEdit(scope.row)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
      <Paging :pageSum="pageSum" :total="total"></Paging>
    </div>

    <!--  修改弹窗  -->
    <VariableEdit></VariableEdit>
  </div>
</template>

<script>
import VariableEdit from "@/pages/Role/VariableEdit";
import {mapMutations, mapState} from "vuex";

export default {
  name: "Variable",
  components: {
    VariableEdit,
  },
  data() {
    return {
      tableData: [],
      pageSum: 0,
      limit: 10,
      page: 1,
      total: 0,
    };
  },
  methods: {
    ...mapMutations("variable", ["handleVariableEdit"]),
    //请求页面数据函数
    async getInfo(limit, page) {
      this.pageSum = 5;
      this.total = 3;
      await this.$axios({
        method: "POST",
        url: "/var/showVars",
        params: {
          limit,
          page,
        },
      }).then((res) => {
        if (res.data.data.length !== 0) {
          this.tableData = res.data.data
          this.total = res.data.data.length
          this.pageSum = Math.ceil(res.data.data.length / limit)
          if (res.data.data.length === 0) {
            this.changePage -= 1
          }
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    //搜索查询函数
    searchInfo(keyword) {
      console.log(keyword);
    },
  },
  computed: {
    ...mapState("Information", ["changeLimit", "changePage", "inputValue"]),
    changePage: {
      get() {
        return this.$store.state.Information.changePage
      },
      set(val) {
        return this.$store.state.Information.changePage = val
      }
    },
    changeLimit: {
      get() {
        return this.$store.state.Information.changeLimit
      },
      set(val) {
        return this.$store.state.Information.changeLimit = val
      }
    },
    inputValue: {
      get() {
        return this.$store.state.Information.inputValue
      },
      set(val) {
        return this.$store.state.Information.inputValue = val
      }
    },
    variableContainerHeight() {
      if (this.tableData.length > 15) {
        return 15 * 45 + 210 + "px";
      } else if (this.tableData.length < 10) {
        return 10 * 45 + 172 + "px";
      }
      return this.tableData.length * 45 + 210 + "px";
    },
    tableContainerHeight() {
      if (this.tableData.length > 15) {
        return 15 * 45 + 20 + "px";
      } else if (this.tableData.length < 10) {
        return 10 * 45 + 12 + "px";
      }
      return this.tableData.length * 45 + 20 + "px";
    },
    tableHeight() {
      if (this.tableData.length > 15) {
        return 15 * 45 - 49;
      } else if (this.tableData.length < 10) {
        return 10 * 45 - 49;
      }
      return this.tableData.length * 45 - 49;
    },
    //数据处理
    realData() {
      let arr = []
      let vids = []
      this.tableData.forEach((item) => {
        let index1 = vids.indexOf(item.vId)
        if (index1 === -1) {
          vids.push(item.vId)
          arr.push({
            ...item,
            vValue: [item.vValue]
          })
        } else {
          arr[index1].vValue.push(item.vValue)
        }
      })
      arr.forEach(item => item.vValue = item.vValue.join("|"))
      return arr
    },
  },
  watch: {
    changeLimit(newLimit) {
      this.limit = newLimit;
      this.getInfo(this.limit, this.page);
    },
    changePage(newPage) {
      this.page = newPage;
      this.getInfo(this.limit, this.page);
    },
    inputValue(newValue) {
      this.searchInfo(newValue);
    },
  },
  mounted() {
    this.getInfo(this.limit, this.page);
  },
  beforeDestroy() {
    this.changePage = 1
    this.changeLimit = 10
    this.inputValue = ''
  }
}
</script>

<style scoped>
.variableContainer {
  width: 97%;
  margin: 15px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.tableContainer {
  width: 96%;
  margin: 15px auto;
  border: 1px solid #cfd1d2;
}

.i-color {
  margin-right: 20px;
  color: #409eff;
  font-size: 20px;
  font-weight: bold;
}
</style>